><template>
    <div class="dh_xgj_manage">
        <div class="d_x_m-list">

            <el-button @click="add" type="primary" class="mb5">添加</el-button>
            <div class="inquire">
                <el-form :model="staffquery" :inline="true" size="mini">
                    <el-form-item label="日期：">
                        <el-date-picker
                            v-model="staffquery.create_time"
                            type="daterange"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="requestdata(2)">查 询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="notice"
                border
                stripe
                height="500"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                style="width: 100%">
                <el-table-column type="expand">
                <template slot-scope="props" class="f20">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="通知：">
                            <span>{{ props.row.title }} <span class="ml20 f14 red">发布时间：{{ props.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span></span>
                        </el-form-item>
                        <el-form-item label="通知内容：">
                            <span>{{ props.row.content }}</span>
                        </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    width="80">
                </el-table-column>
                <el-table-column
                    label="标题"
                    prop="title">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    label="内容"
                    prop="content"
                    min-width="260">
                </el-table-column>
                <el-table-column
                    label="发布时间"
                    width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="160">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            @click="amend(scope.$index, scope.row)"
                            size="small"
                        >修改</el-button>
                        <el-button
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                            size="small"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        
        <div class="dialog">

            <el-dialog title="添加通知" :visible.sync="dialoginform" center :append-to-body='true' :lock-scroll="false" top="20vh" width="450px">
                            
                <!-- <p class="dxm-ltb-text tc red mb5">*默认值是原始信息，重写编写提交即可</p> -->

                <el-form :model="revamp" ref="revamp" :rules="rules" label-width="80px">

                    <el-form-item label="通知标题" prop="title">
                        <el-input v-model="revamp.title" clearable placeholder="请输入发布的通知标题"></el-input>
                    </el-form-item>
                    <el-form-item label="通知内容" prop="content">
                        <el-input 
                            type="textarea" 
                            v-model="revamp.content" 
                            clearable 
                            placeholder="请输入发布的通知内容"
                            :autosize="{ minRows: 5}"
                            ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="refer()">立即创建</el-button>
                        <el-button @click="cancelquery()">取消</el-button>
                    </el-form-item>

                </el-form>
                
            </el-dialog>

            <el-dialog title="修改员工信息" :visible.sync="dialogFormVisible" center :append-to-body='true' :lock-scroll="false" top="20vh" width="450px">
								
                <p class="dxm-ltb-text tc red mb5">*默认值是原始信息，重写编写提交即可</p>

                <el-form :model="amendform" ref="amendform" label-width="80px">

                    <el-form-item label="通知标题">
                        <el-input v-model="amendform.title" clearable placeholder="请输入发布的通知标题"></el-input>
                    </el-form-item>
                    <el-form-item label="通知内容">
                        <el-input 
                            type="textarea" 
                            v-model="amendform.content" 
                            clearable 
                            placeholder="请输入发布的通知内容"
                            :autosize="{ minRows: 5}"
                            ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="amendInform()">提交修改</el-button>
                        <el-button @click="informcancel()">取消</el-button>
                    </el-form-item>

                </el-form>
                
            </el-dialog>

        </div>

        <div class="d_j_mber-block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagecount">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import axjs from "../js/request.js"
import {formatDate} from "../js/time.js";
import {timetamp} from "../js/time.js";
import {timedata} from "../js/time.js";
export default {
    components: {},
    data() {
        return {
            dialoginform: false,              //添加通知的状态(显示隐藏)
            dialogFormVisible: false,
            login: {} ,                 //用户名密码
            notice: [],                 //通知数组
            // 新增通知的绑定值
            revamp:{
                title: '',
                content: '',
            },
            amendform:{
                id: "",
                title: '',
                content: '',
            },
            staffquery:{
                create_time: ""
            },
            currentPage: 1,						//分页的默认页数
            pageSize: 100,                       //单页条数
            pagecount: 0,						//总页数
            datetime: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            rules:{
                title: [
                    { required: true, message: '请输入发布的通知标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入发布的通知内容', trigger: 'blur' }
                ],
            }
        };
    },
    filters: {
        formatDate(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        formatDateBehind(time) {					 //时间(时分秒)
            var date = new Date(time);
            return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
        },
    },
    computed: {},
    watch: {},
    methods: {
        // 方法中的过滤器
        formatDatea(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        // 获取公告
        requestdata(num){
            // const that = this;
            let data = {list_rows:this.pageSize,page:this.currentPage}
            if(this.staffquery.create_time !== "" && this.staffquery.create_time !== null){
                data.start_time = timetamp(String(this.staffquery.create_time[0]));//开始时间
                data.end_time = timedata(this.staffquery.create_time[1]);//结束时间))
            }
            axjs.request("/aLiPayNotice/list","post",JSON.stringify(data)).then(resp=>{
                // console.log(resp)
                if(num === 2 ){
                    resp.data.data.total
                    ? (that.$message({
                        message: "找到"+resp.data.data.total+"条数据",
                        type: "success"
                    })) 
                    : (this.$message.error("没有符合条件数据"));
                }
                this.notice = resp.data.data.data;
                this.pagecount = resp.data.data.total;
            })
        },
        add(){
            this.dialoginform = true;
        },
        // 添加确认提交
        refer(){
            let daydate = parseInt((new Date()).getTime()/1000)
            let data = {title:this.revamp.title,content:this.revamp.content,create_time: daydate}
            axjs.request("/aLiPayNotice/add","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.dialoginform = false;
                if(resp.data.code === 200){
                    this.revamp.title = "";
                    this.revamp.content = "";
                    data.id = resp.data.data;
                    this.notice.length < this.pageSize ? this.notice.unshift(data) : "";
                }else{return}
            })
        },
        cancelquery(){
            this.dialoginform = false;
        },

        // 弹出层以及修改员工信息
        amend(index, row){
            for(var i in this.amendform) this.amendform[i] = row[i];
            this.amendform.index = index;
            this.dialogFormVisible = true;
        },
        // 修改确认
        amendInform(){
            // console.log(this.amendform)
            let data = {id:this.amendform.id,title:this.amendform.title,content:this.amendform.content};
            for(var i in data) data[i] === "" || data[i] === null ? delete data[i] : "";
            console.log(data)
            axjs.request("/aLiPayNotice/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.dialogFormVisible = false
                if(resp.data.code === 200){
                    let key = this.amendform.index;
                    // console.log(key)
                    data[i] !== "" || data[i] !== null ? this.notice[key][i] = data[i] : "";
                }else{return}
            })
        },

        // 关闭修改弹窗
        informcancel(){
            this.dialogFormVisible = false
        },

        // 删除
        remove(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axjs.request("/aLiPayNotice/delete","post",JSON.stringify({id:row.id,})).then(resp=>{
                    console.log(resp)
                    if(resp.data.code === 200){
                        this.notice.splice(index,1)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{return}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.requestdata(1)
        },
        //分页的跳页函数
        handleCurrentChange(val) {
            this.currentPage = val;
            // console.log(`当前页: ${val}`);
            this.requestdata(1)
        },
    },
    created() {},
    mounted() {
        const that = this;
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"));
        that.requestdata(1)
        // that.datetime = date(Date.parse(new Date()));
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
/* @import url(); 引入公共css类 */
    .dh_xgj_inform{
        height: 100%;
    }
    .dh_xgj_manage{
        padding: 10px;
        background-color: #ffffff;
        border-radius: 5px;
    }
    .inquire{
        border-right: 1px solid #EBEEF5;
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        padding: 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
    /* 分页 */
    .d_j_mber-block{
        border-right: 1px solid #EBEEF5;
        border-bottom: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
    }
</style>